<template>
	<view>
		<view class="navgator" :style="{'padding-top':statusHeight + 'px'}">
			
			<view class="msg"></view>
			<view class="center">
				<label class="title">我的</label>
			</view>
			
			<view class="msg">
			<image mode="widthFix" src="../../static/message.png" class="msgImg"  @click="clickRight">
				
			</image>
			<view class="dot" v-if="nums>0">{{nums}}</view>
			</view>
		</view>
		<view class="flexdig win100 flexWrapWrap">
			<view v-for="(item,index) in menuTitleList" :key="index" class="flexWrapWrap flexdig win100 padgina bacolor maginBootom">
				<view v-for="(items,indexs) in item.menuList" :key="indexs" @click="jumpUrl(items)" class=" pagingyz flexdig win100 alignItemsCenter justifyContentSpaceBetween">
					<view class="flexdig alignItemsCenter">
						<image class="flexdig" :src="items.image" style="width: 55rpx;height: 55rpx;margin-right: 18rpx;"></image>
						<text class="flexdig">{{ items.title }}</text>
					</view>
					<view class="flexdig">
						<uni-icons type="forward" color="#8a8a8a" size="20"></uni-icons>
						<!-- <image class="flexdig" src="/static/right.png" style="width: 40rpx;height: 40rpx;"></image> -->
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		components:{
		},
		data() {
			return {
				menuTitleList: [
					{menuList: [
						{image: '/static/img12.png',title: '管理钱包',page: '/pages/walletManager/walletManager'}
					]},
					{menuList: [
						{image: '/static/img13.png',title: '地址本',page: '/pages/addressBook/addressBook'},
						{image: '/static/img14.png',title: '使用设置',page: '/pages/setting/setting'},
						{image: '/static/img50.png',title: '探索',page: '/pages/explore/explore'},
					]},
					{menuList: [
						{image: '/static/img15.png',title: '帮助与反馈',page: ''},
						{image: '/static/img51.png',title: '钱包指南',page: 'https://manual.token.im/imtoken/?locale=zh-CN&utm_source=imtoken'},
						{image: '/static/img16.png',title: '用户协议',page: 'https://token.im/tos?locale=zh-cn&utm_source=imtoken'},
						{image: '/static/img17.png',title: '关于我们',page: '/pages/regardmain/regardmain'},
					]}
				],
				msgList:this.$store.state.msgList,
				nums:0
			}
		},
		
		
		methods: {
			jumpUrl(row){
				console.log("row.page:",row.page);
				
				console.log("row.page.indexOf:",row.page.indexOf("/pages"));
				if(row.page.indexOf("/pages") > -1){
					this.Api.go_to(row.page)
				}else{
					this.Api.go_to(`/pages/webView/webView?url=${row.page}&title=${row.title}`)
				}
			},
			clickRight(){
				
				this.$store.commit('setMsg',false)
			
				
				this.Api.go_to('/pages/messageCenter/messageCenter')
				
			},
			setHotDot(){
				console.log("进来了")
				
				let list = this.$store.state.msgList
				
				let temp1 =list.filter(item=>item.isNew)
				this.nums = temp1.length
					let temp = list.filter(item=> item.isNew)
				 
					
					if(temp.length>0){
						uni.setTabBarBadge({ //显示数字
						  index: 3, //tabbar下标
						  text: temp.length + ''//数字
						})
					}else{
						uni.removeTabBarBadge({ //隐藏数字标
						  index:3 //tabbar下标
						})  
					}
				
			}
		},
		
		onLoad() {
			let temp =this.msgList.filter(item=>item.isNew)
			this.nums = temp.length
			uni.$on("setHotDot",data=>{
				this.msgList=this.$store.state.msgList
				this.setHotDot();
				
			})
		},
		onShow() {
			this.msgList=this.$store.state.msgList
			this.setHotDot();
		},
		computed: {
			//状态栏高度
			statusHeight() {
				return uni.getSystemInfoSync().statusBarHeight || 10; //如果没有获取到高度，那么指定10px；
			}
		}
	}
</script>

<style>
	page{
		background-color: #f6f6f6;
	}
</style>
<style scoped>
	.bacolor{
		background-color: #ffffff;
	}
.flexdig{
		display: flex;
	}
	.alignItemsCenter{
		align-items: center;
	}
	.padgina{
		padding: 0 29rpx;
	}
	.win100{
		width: 100%;
	}
	.pagingyz{
		padding: 24rpx 0;
	}
	.justifyContentSpaceBetween{
		justify-content: space-between;
	}
	.maginBootom{
		margin-bottom: 40rpx;
	}
	.flexWrapWrap{
		flex-wrap: wrap;
	}
	
	.navgator {
		background-color: #F7F7F7;
		width: 100%;
		
		display: flex;
		align-items: center;
		box-sizing: border-box;
		height: 120rpx;
		padding:20rpx 40rpx;
		position: relative;
	}
	
	.center {
		flex: 1;
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
		margin-left: -40rpx;
	
	}
	.msg{
		width: 50rpx;
		height: 120rpx;
		position:relative;
		display: flex;
		align-items: center;
		
	}
	.msgImg{
		width: 100%;
	}
	.dot{
		position: absolute;
		top: 30rpx;
		right: 0rpx;
		width: 30rpx;
		height: 30rpx;
		display: flex;
		align-items: center;
		justify-content: center;
		background-color: red;
		color: white;
		font-size: 15rpx;
		border-radius: 30rpx;
	}
</style>
